<template>
  <a-menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    style="width: 256px"
    mode="vertical"
    :items="items"
    @click="handleClick"
  />
</template>
<script setup>
import { h, ref } from "vue";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const selectedKeys = ref([]);
const openKeys = ref([]);
const items = ref([
  {
    key: "1",
    icon: () => h(MailOutlined),
    label: "历史",
    title: "历史",
  },
  {
    key: "2",
    icon: () => h(CalendarOutlined),
    label: "哲学",
    title: "哲学",
  },
  {
    key: "3",
    icon: () => h(AppstoreOutlined),
    label: "传记",
    title: "传记",
    children: [
      {
        key: "3",
        label: "Option 3",
        title: "Option 3",
      },
      {
        key: "4",
        label: "Option 4",
        title: "Option 4",
      },
      {
        key: "sub1-2",
        label: "Submenu",
        title: "Submenu",
        children: [
          {
            key: "5",
            label: "Option 5",
            title: "Option 5",
          },
          {
            key: "6",
            label: "Option 6",
            title: "Option 6",
          },
        ],
      },
    ],
  },
  {
    key: "sub2",
    icon: () => h(SettingOutlined),
    label: "Navigation Four",
    title: "Navigation Four",
    children: [
      {
        key: "7",
        label: "Option 7",
        title: "Option 7",
      },
      {
        key: "8",
        label: "Option 8",
        title: "Option 8",
      },
      {
        key: "9",
        label: "Option 9",
        title: "Option 9",
      },
      {
        key: "10",
        label: "Option 10",
        title: "Option 10",
      },
    ],
  },
]);
const handleClick = (menuInfo) => {
  console.log("click ", menuInfo);
  if (menuInfo.keyPath.length === 1) {
    router.push("/category/" + menuInfo.key);
  }
};
</script>
